<template>
  <div v-if="myInfo" class="myInfo">
    <Title title="登录信息" class="title"></Title>
    <ul class="infolist">
      <li><span>服务器地址：</span>{{myInfo.baseURL}}</li>
      <li><span>用户名：</span>{{myInfo.username}}</li>
    </ul>
    <Title title="修改密码" class="title"></Title>
    <van-form @submit="onSubmit" class="form">
      <van-field
        v-model.trim="oldpsd"
        type="password"
        name="oldpsd"
        label="原密码"
        placeholder="请输入原密码"
        class="formItem"
        :rules="[{ required: true, message: '请填写原密码' }]"
      />
      <van-field
        v-model.trim="newpsd"
        type="password"
        name="newpsd"
        label="新密码"
        class="formItem"
        placeholder="请输入新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <van-field
        v-model.trim="newpsd1"
        type="password"
        name="newpsd1"
        label="确认密码"
        class="formItem"
        placeholder="请输入确认密码"
        :rules="[{ required: true, message: '请输入确认密码' }]"
      />
      <div style="margin: 16px;">
        <van-button class="btn" size="small" round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
  <div v-else>
    <van-empty description="数据请求失败！" />
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, Button, Field } from 'vant'
import Title from '@/components/Title'

Vue.use(Form)
Vue.use(Button)
Vue.use(Field)
export default {
  data () {
    return {
      myInfo: null,
      oldpsd: '',
      newpsd: '',
      newpsd1: ''
    }
  },
  mounted () {
    this.myInfo = JSON.parse(localStorage.getItem('user'))
  },
  methods: {
    // 修改密码
    onSubmit () {
      if (this.newpsd !== this.newpsd1) {
        return this.$Notify('两次密码输入不一致！')
      }
      const parse = {
        url: '/password',
        data: {
          oldpassword: this.oldpsd,
          newpassword: this.newpsd
        }
      }
      this.$post(parse, res => {
        this.$Notify({ type: 'success', message: '修改成功！重载页面，请稍候！' })
        localStorage.removeItem('user')
        localStorage.removeItem('token')
        localStorage.removeItem('userList')
        location.reload()
      })
    }
  },
  components: {
    Title
  }
}
</script>

<style lang="scss" scoped>
.myInfo{
  margin: 0 vw(40);
}
.title{
  margin: vw(50) 0 vw(40) 0;
}
.infolist{
  margin-bottom: vw(30);
  li{
    font-size: vw(28);
    line-height: vw(90);
    padding: 0 vw(30);
    span{
      display: inline-block;
      width: vw(200);
    }
  }
}
.form{
  display: flex;
  flex-direction: column;
  height: vw(500);
  justify-content: space-around;
  align-items: center;
  margin-top: vw(30);
  .btn{
    width: vw(330);
    height: vw(70);
  }
}
.formItem{
  border-bottom: 1px solid #ccc;
}
</style>
